<template>
  <el-dialog
    title="修改组织"
    :visible.sync="organizationEditDialog"
    width="30%"
    @open="organizationEditDialogOpen"
  >
    <el-form :model="editOrganizationForm" ref="editOrganizationForm" label-width="100px" class="demo-dynamic">
      <el-form-item
        prop="organizationName"
        label="组织名称:"
        :rules="filter_rules({required: true, max: 50, min: 3, type: 'nameBadCharactor'})"
      >
        <el-input v-model="editOrganizationForm.organizationName" size="mini"></el-input>
      </el-form-item>
      <el-form-item
        label="组织简称:"
        prop="abbreviation"
        :rules="filter_rules({required: true, max: 50, min: 3, type: 'nameBadCharactor'})">
        <el-input v-model="editOrganizationForm.abbreviation" size="mini"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="organizationEditDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitOrganizationEditForm('editOrganizationForm')" size="mini">确 定</el-button>
      </span>
  </el-dialog>
</template>
<style>
</style>
<script>
  import { updateOrganizationRemote } from '@/view/api/organization.js'
  import { yfuPost } from '@/utils/request.js'
  import { yfuSuccessToast } from '@/utils/yfuMessage.js'
  export default {
    methods: {
      submitOrganizationEditForm (formName) {
        let cThis = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            cThis.organizationEditRow.organizationName = cThis.editOrganizationForm.organizationName
            cThis.organizationEditRow.abbreviation = cThis.editOrganizationForm.abbreviation
            yfuPost(process.env.BASE_API, updateOrganizationRemote.url, cThis.organizationEditRow, (data) => {
              // 关闭dialog
              cThis.closeEditDialog()
              yfuSuccessToast('保存成功')
              cThis.$emit('on-refresh-change')
            })
          } else {
            return false
          }
        })
      },
      organizationEditDialogOpen () {
      },
      openEditDialog (row) {
        this.organizationEditRow = row
        this.editOrganizationForm.organizationName = row.organizationName
        this.editOrganizationForm.abbreviation = row.abbreviation
        this.organizationEditDialog = true
      },
      closeEditDialog () {
        this.editOrganizationForm = {}
        this.organizationEditDialog = false
      }
    },
    data () {
      return {
        editOrganizationForm: {
          organizationName: '',
          abbreviation: ''
        },
        organizationEditRow: {},
        organizationEditDialog: false
      }
    }
  }
</script>
